<template>
  <view class="register-container">
    <!-- 头部 -->
    <view class="header">
      <view class="logo">
        <image src="/static/images/logo.png" />
      </view>
      <view class="title">注册账号</view>
      <view class="subtitle">创建您的专属账户</view>
    </view>
    
    <!-- 注册表单 -->
    <view class="form-container">
      <view class="form-group">
        <input 
          type="number" 
          v-model="phone" 
          placeholder="请输入手机号" 
          maxlength="11"
          class="form-input"
        />
      </view>
      
      <view class="form-group">
        <view class="verify-code-container">
          <input 
            type="number" 
            v-model="verifyCode" 
            placeholder="请输入验证码" 
            maxlength="6"
            class="form-input verify-input"
          />
          <button 
            class="verify-btn" 
            :disabled="countdown > 0 || !phone"
            @click="sendVerifyCode"
          >
            {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
          </button>
        </view>
      </view>
      
      <view class="form-group">
        <input 
          type="password" 
          v-model="password" 
          placeholder="请输入密码(6-20位)" 
          class="form-input"
        />
      </view>
      
      <view class="form-group">
        <input 
          type="password" 
          v-model="confirmPassword" 
          placeholder="请再次输入密码" 
          class="form-input"
        />
      </view>
      
      <view class="form-group">
        <input 
          type="text" 
          v-model="inviteCode" 
          placeholder="邀请码(选填)" 
          class="form-input"
        />
      </view>
      
      <!-- 协议选择 -->
      <view class="agreement-container">
        <checkbox-group @change="onAgreementChange">
          <label class="agreement-item">
            <checkbox value="agree" :checked="agreed" />
            <text class="agreement-text">
              我已阅读并同意
              <text class="link" @click="showAgreement('user')">《用户协议》</text>
              和
              <text class="link" @click="showAgreement('privacy')">《隐私政策》</text>
            </text>
          </label>
        </checkbox-group>
      </view>
      
      <button 
        class="register-btn" 
        :disabled="!canRegister"
        @click="register"
      >
        立即注册
      </button>
    </view>
    
    <!-- 其他登录方式 -->
    <view class="other-login">
      <view class="divider">
        <text>其他注册方式</text>
      </view>
      
      <view class="social-login">
        <view class="social-item" @click="wechatRegister">
          <image src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" />
          <text>微信注册</text>
        </view>
      </view>
    </view>
    
    <!-- 返回登录 -->
    <view class="back-login">
      <text>已有账号？</text>
      <text class="link" @click="goToLogin">立即登录</text>
    </view>
  </view>
</template>

<script>
import { sendVerifyCode, register } from '@/api/user'

export default {
  data() {
    return {
      phone: '',
      verifyCode: '',
      password: '',
      confirmPassword: '',
      inviteCode: '',
      agreed: false,
      countdown: 0,
      timer: null
    }
  },
  computed: {
    canRegister() {
      return this.phone && 
             this.verifyCode && 
             this.password && 
             this.confirmPassword && 
             this.agreed
    }
  },
  methods: {
    async sendVerifyCode() {
      if (!this.phone) {
        uni.showToast({ title: '请输入手机号', icon: 'none' })
        return
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        uni.showToast({ title: '手机号格式不正确', icon: 'none' })
        return
      }
      
      try {
        await sendVerifyCode(this.phone)
        uni.showToast({ title: '验证码已发送', icon: 'success' })
        this.startCountdown()
      } catch (error) {
        uni.showToast({ 
          title: error.message || '发送失败，请重试', 
          icon: 'none' 
        })
      }
    },
    
    startCountdown() {
      this.countdown = 60
      this.timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(this.timer)
        }
      }, 1000)
    },
    
    onAgreementChange(e) {
      this.agreed = e.detail.value.includes('agree')
    },
    
    async register() {
      if (!this.canRegister) return
      
      // 验证密码
      if (this.password.length < 6 || this.password.length > 20) {
        uni.showToast({ title: '密码长度为6-20位', icon: 'none' })
        return
      }
      
      if (this.password !== this.confirmPassword) {
        uni.showToast({ title: '两次密码输入不一致', icon: 'none' })
        return
      }
      
      try {
        uni.showLoading({ title: '注册中...' })
        
        const result = await register({
          phone: this.phone,
          verifyCode: this.verifyCode,
          password: this.password,
          inviteCode: this.inviteCode
        })
        
        uni.hideLoading()
        uni.showToast({ title: '注册成功', icon: 'success' })
        
        // 自动登录
        setTimeout(() => {
          // 保存用户信息
          uni.setStorageSync('userInfo', result.data)
          uni.setStorageSync('token', result.data.token)
          
          // 跳转到首页
          uni.switchTab({
            url: '/pages/index/index'
          })
        }, 1500)
        
      } catch (error) {
        uni.hideLoading()
        uni.showToast({ 
          title: error.message || '注册失败，请重试', 
          icon: 'none' 
        })
      }
    },
    
    wechatRegister() {
      uni.showToast({
        title: '微信注册功能开发中',
        icon: 'none'
      })
    },
    
    showAgreement(type) {
      const title = type === 'user' ? '用户协议' : '隐私政策'
      uni.showModal({
        title,
        content: `这里是${title}的内容，实际开发中会跳转到具体的协议页面。`,
        showCancel: false
      })
    },
    
    goToLogin() {
      uni.redirectTo({
        url: '/pages/login/index'
      })
    }
  },
  
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>
.register-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx;
}

.header {
  text-align: center;
  margin-bottom: 80rpx;
  
  .logo {
    width: 120rpx;
    height: 120rpx;
    margin: 0 auto 40rpx;
    
    image {
      width: 100%;
      height: 100%;
      border-radius: 60rpx;
    }
  }
  
  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.form-container {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 40rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.form-input {
  width: 100%;
  height: 88rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 32rpx;
  box-sizing: border-box;
  
  &:focus {
    border-color: #667eea;
  }
}

.verify-code-container {
  display: flex;
  align-items: center;
  gap: 20rpx;
  
  .verify-input {
    flex: 1;
  }
  
  .verify-btn {
    width: 200rpx;
    height: 88rpx;
    background: #667eea;
    color: #ffffff;
    border: none;
    border-radius: 12rpx;
    font-size: 26rpx;
    
    &:disabled {
      background: #cccccc;
    }
  }
}

.agreement-container {
  margin: 40rpx 0;
  
  .agreement-item {
    display: flex;
    align-items: flex-start;
    
    checkbox {
      margin-right: 20rpx;
      margin-top: 6rpx;
    }
    
    .agreement-text {
      font-size: 26rpx;
      line-height: 1.5;
      color: #666666;
      
      .link {
        color: #667eea;
        text-decoration: underline;
      }
    }
  }
}

.register-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 40rpx;
  
  &:disabled {
    background: #cccccc;
  }
}

.other-login {
  margin: 60rpx 0;
  
  .divider {
    text-align: center;
    margin-bottom: 40rpx;
    position: relative;
    
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 30%;
      height: 2rpx;
      background-color: rgba(255, 255, 255, 0.3);
    }
    
    &::before {
      left: 0;
    }
    
    &::after {
      right: 0;
    }
    
    text {
      color: rgba(255, 255, 255, 0.8);
      font-size: 26rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 0 20rpx;
    }
  }
  
  .social-login {
    display: flex;
    justify-content: center;
    
    .social-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx;
      
      image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 12rpx;
        margin-bottom: 10rpx;
      }
      
      text {
        color: #ffffff;
        font-size: 24rpx;
      }
    }
  }
}

.back-login {
  text-align: center;
  margin-top: 60rpx;
  
  text:first-child {
    color: rgba(255, 255, 255, 0.8);
    font-size: 28rpx;
    margin-right: 10rpx;
  }
  
  .link {
    color: #ffffff;
    font-size: 28rpx;
    text-decoration: underline;
    font-weight: bold;
  }
}
</style> 